import React, { Component } from 'react'
import PropTypes, { symbol } from 'prop-types'
import { saveUsdt } from '@/store/action'
import API from '@/api/api'
import './style.less'

class exchangeList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            exchangeList: [],
            mainList: [],
            tradeList: [],
            configList: [],
            usdtCny: [],
        }
    }
    // static propTypes = {
    //     usdtInfo: PropTypes.object,
    //     saveUsdt: PropTypes.func,
    // }
    componentDidMount() {
        // this.props.saveUsdt();
        this.initDate();
    }
    initDate() {
        let mainList;
        let tradeList;
        let configList;
        Promise.all([API.getConfigSymbolRank(), API.getTrade(), API.symbolConfigList()]).then((res) => {
            if (res[0].code == '100200') {
                mainList = res[0].data;
                tradeList = res[1].data;
                configList = res[2].data;
                let innerObj;
                for (let key in mainList) {
                    for (let i = 0; i < configList.length; i++) {
                        innerObj = configList[i];
                        if (mainList[key].symbol === innerObj.symbol) {
                            mainList[key][innerObj.profileKey] = innerObj.profileValue;
                        }
                    }
                }
                this.setState({
                    mainList
                })
                console.log(this.state.mainList)
                this.loopPan()
            } else {
                this.errors(res[0].data.msg);
            }
        }).catch(err => {
            this.loading = false;
        })
        API.getUSDT().then(res => {
            if (res.code == '100200') {
                let regEx = /[^\d|^\.|^\-]/g;
                for (let i in res.data) {
                    res.data[i] = res.data[i].replace(regEx, "") * 1;
                }
                this.setState({
                    usdtCny: res.data
                })
            }
        })
    }
    //轮训盘
    loopPan() {
        let exchangeList = [];
        API.getTrade().then(res => {
            this.setState({
                tradeList: res
            })
            // this.Time = setTimeout(() => {
            //     this.loopPan();
            // }, 1000)
            let mainList = this.state.mainList;
            exchangeList = this.formatTrade(this.formatData(mainList))
            console.log(exchangeList)
            this.setState({
                exchangeList
            })
        })
    }
    formatTrade(data) {
        data.map((e, index) => {
            for (let i in this.state.tradeList) {
                if (e.symbol == i) {
                    e.trade = this.state.tradeList[i];
                    let pr_ne = this.state.tradeList[i].newPrice ? this.state.tradeList[i]['newPrice'] * 1 : 0; // 最新價
                    let pr_op = this.state.tradeList[i].newPrice ? this.state.tradeList[i]['24Price'] * 1 : 0; // 開盤價
                    // 漲跌幅

                    let distance = pr_ne - pr_op;
                    if ((this.state.tradeList[i].newPrice ? this.state.tradeList[i]['24Price'] * 1 : 0) == 0) {
                        e.trade.changeRatio = 0;
                    } else {
                        if (distance > 0) {
                            e.trade.changeRatio = '+' + (parseFloat(distance / pr_op * 100)).toFixed(2);
                        } else {
                            e.trade.changeRatio = (parseFloat(distance / pr_op * 100)).toFixed(2) ;
                        }
                    }
                    e.trade.changeRatioNum = parseFloat(e.trade.newPrice ? e.trade.changeRatio : 0);      
                    console.log(e.trade.changeRatioNum)
                }
            }
        })
        return data
    }
    //格式化数据
    formatData(data) {
        let arr = [];
        data.map((e, i) => {
            arr.push(e);
        })
        return arr;
    }

    render() {
        return (
            <div className="exchange-main">
                <div className="exchange-nav">
                    <span className="title">名称/成交量</span>
                    <span className="title">最新价格</span>
                    <span>涨跌幅</span>
                </div>
                <div className="exchange-list">
                    {this.state.exchangeList.map((item, index) =>
                        (item.status === 'LISTED'&&item.title.indexOf(this.props.title)>-1) ?
                            <div className="exchange-block" key={index}>
                                <div className="unit">
                                    <div className="">
                                        <span>{item.assetCode2}</span>
                                    </div>
                                    <div className="ss-word">24H量：{item.trade['24Total']?parseFloat(item.trade['24Total']).toFixed(item.AMOUNTPRECISION):0}</div>
                                </div>
                                <div className="unit">
                                    <div className="">
                                        {
                                            item.trade ? item.trade['newPrice'].toFixed(item.PRICEPRECISION) : 0
                                        }
                                    </div>
                                    <div className="s-word">￥{(item.trade.newPrice * (item.assetCode1 === 'USDT' ? this.state.usdtCny.tether : item.assetCode1 === 'BTC' ? this.state.usdtCny.bitcoin : '7')).toFixed(item.PRICEPRECISION)}</div>
                                </div>
                                <div className={item.trade.changeRatioNum>=0?'rise':'fall'}>{item.trade ? item.trade.changeRatio : 0}%</div>
                            </div> : ''
                            // <div className="exchange-block" key={index}>
                            //     <div className="unit">
                            //         <div className="">
                            //             <span>{item.assetCode2}</span>
                            //         </div>
                            //         <div className="ss-word">24H量：--</div>
                            //     </div>
                            //     <div className="unit">
                            //         {
                            //             item.trade ? <div className="">--</div> : ''
                            //         }
                            //         <div className="s-word">￥--</div>
                            //     </div>
                            //     <div className='rise'>--%</div>
                            // </div>
                    )}

                </div>
            </div>
        )
    }
}

export default exchangeList;